<template>
  <layout title="验证码输入">
    <layout-content title="基础使用">
      <tn-verification-code-input v-model="basicCodeValue"></tn-verification-code-input>
      <view class="tn-margin-top-sm">
        <tn-verification-code-input v-model="basicCodeValue" mode="bottomLine"></tn-verification-code-input>
      </view>
      <view class="tn-margin-top-sm">
        <tn-verification-code-input v-model="basicCodeValue" mode="middleLine"></tn-verification-code-input>
      </view>
    </layout-content>

    <layout-content title="使用点代替内容">
      <tn-verification-code-input v-model="dotCodeValue" dot-fill></tn-verification-code-input>
      <view class="tn-margin-top-sm">
        <tn-verification-code-input v-model="dotCodeValue" dot-fill mode="bottomLine"></tn-verification-code-input>
      </view>
      <view class="tn-margin-top-sm">
        <tn-verification-code-input v-model="dotCodeValue" dot-fill mode="middleLine"></tn-verification-code-input>
      </view>
    </layout-content>

    <layout-content title="设置字体信息">
      <tn-verification-code-input v-model="fontInfoCodeValue" font-size="50" bold></tn-verification-code-input>
    </layout-content>

    <layout-content title="设置颜色">
      <tn-verification-code-input v-model="customColoeCodeValue" active-color="#31C9E8" inactive-color="#D6F4FA"></tn-verification-code-input>
    </layout-content>

    <layout-content title="自动获取焦点">
      <tn-verification-code-input v-model="basicCodeValue" focus></tn-verification-code-input>
    </layout-content>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnVerificationCodeInput from '@/tuniao-ui/components/tn-verification-code-input/src/VerificationCodeInput.vue'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// 验证码的值
let basicCodeValue = ref<string>('')
let dotCodeValue = ref<string>('')
let fontInfoCodeValue = ref<string>('')
let customColoeCodeValue = ref<string>('')
</script>

<style lang="scss" scoped>
</style>
